import { Table, Input, Button, Tabs } from 'antd';
import { useContext, useEffect ,useState} from 'react'
import { PlusOutlined, LeftOutlined } from '@ant-design/icons'
import { DthesaurusContent } from './dthesaurus-content'
import { ProperNounsType, SynonymsForType, CaseLibraryType,paginationType } from './type'
import CreatetermModel from './termModel'
import styles from './styles.module.css';
const domainDetail = () => {
    const {
        properNounsColumns,
        properNounsData,
        tablist,
        onChange,
        tabType,
        SynonymsForData,
        SynonymsForColumns,
        CaseLibraryColumn,
        CaseLibraryData,
        domainRow,
        setPageType,
        createtermModeloPen,
        setCreatetermModeloPen,
        tremEditStatus,
        setTremEditStatus,
        inittermData,
        termpagination,
        setTermPagination,
        setTermRow,
        filterTermValue,
        setFilterTermValue,
        tableHeight,
        setTableHeight,
        getTableHeight
    } = useContext(DthesaurusContent)
  useEffect(() => {
    setTableHeight(getTableHeight());
    window.addEventListener('resize', () => setTableHeight(getTableHeight()));
    return () => window.removeEventListener('resize', () => {});
  }, []);
    useEffect(() => {
        inittermData()
    }, [filterTermValue, inittermData])
    const onSearch = (e: any) => {
        setTermPagination({
            current: 1,
            pageSize: 10,
            total: 0
        })
        setFilterTermValue(e.target.value)
    }
    return <div className='h-screen w-full p-4 md:p-6 overflow-y-auto'>
        <div className='flex items-center mb-2'><span className='cursor-pointer' onClick={() => {
            setPageType('list')
        }}><LeftOutlined  style={{fontSize:'12px'}}/></span><span className="text-[18px]">{domainRow?.name}</span></div>
        <div className={styles['domain-detail-tab']}>
            <Tabs defaultActiveKey="ProperNouns" items={tablist} onChange={onChange} className='mb-2' style={{backgroundColor:'none'}}/>
        </div>
        <div className='flex justify-between items-center mb-3'><Input className='w-[200px]' value={filterTermValue} onChange={onSearch} onPressEnter={onSearch}></Input><Button
            onClick={() => {
                setCreatetermModeloPen(true)
                setTremEditStatus('add')
                setTermRow({})
            }}
            className='border-none text-white bg-button-gradient flex items-center'
            icon={<PlusOutlined />}
        >
            {tabType === 'ProperNouns' ? '创建专有名词' : tabType === 'Synonym' ? '创建同义词' : '创建案例'}
        </Button></div>
        {tabType === 'ProperNouns' ? <Table<ProperNounsType> columns={properNounsColumns} scroll={{y: tableHeight}} dataSource={properNounsData} pagination={{
            ...termpagination,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50'],
            showTotal: total => `共 ${total} 条`,
            onChange: (page, pageSize) => {
                setTermPagination({
                    current: page,
                    pageSize,
                    total: termpagination.total
                });
                inittermData(tabType,page, pageSize)
            }
        }} /> : tabType === 'Synonym' ? <Table<SynonymsForType> columns={SynonymsForColumns}  scroll={{y: tableHeight}} dataSource={SynonymsForData} pagination={{
            ...termpagination,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50'],
            showTotal: total => `共 ${total} 条`,
            onChange: (page, pageSize) => {
                setTermPagination({
                    current: page,
                    pageSize,
                    total: termpagination.total
                });
                inittermData(tabType,page, pageSize)
            }
        }} /> : <Table<CaseLibraryType> columns={CaseLibraryColumn} dataSource={CaseLibraryData} scroll={{y: tableHeight}} pagination={{
            ...termpagination,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50'],
            showTotal: total => `共 ${total} 条`,
            
            onChange: (page, pageSize) => {
                setTermPagination({
                    current: page,
                    pageSize,
                    total: termpagination.total
                });
                inittermData(tabType,page, pageSize)
            }
        }}
        
         />}
        {createtermModeloPen && <CreatetermModel open={createtermModeloPen} onCancel={() => {
            setCreatetermModeloPen(false)
        }} refresh={() => {
              setTermPagination((prevePagination: paginationType) =>({
                   ...prevePagination,
                   page: 1,
              }));
            inittermData(tabType,1,termpagination.pageSize)
        }} type={tremEditStatus} tabType={tabType} />}
    </div>
};

export default domainDetail;